import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {
    WhiteSpace,
    WingBlank,
    Flex,
    Icon,
    Button,
    Modal,
} from 'antd-mobile';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import dianpusvg from "../../assets/img/dianpu.svg";
import rightsvg from "../../assets/img/right.svg";
import {Toast} from "antd-mobile/lib/index";
import logisticsSvg from "../../assets/img/logistics.svg";

class GroupOrderItem extends Component {

    cancelOrder = (orderItem) => {
        Modal.alert('提示', '是否取消订单', [
            {text: '取消'},
            {
                text: '确定',
                onPress: () => {
                    this.props.dispatch({type: 'shopOpenGroup/cancleGroupEFF', obj: {id: orderItem.orderSn}}).then(ret => {
                        console.log("取消订单。。。", ret);
                        if (ret.code == 200) {
                            Toast.success(ret.msg, 1,()=>{
                                this.props.status();
                            });

                        }
                    });
                }
            },
        ]);

    }
    render() {
        const {dataItem} = this.props;
        let orderStatus = "";
        let showCancelBtn = false;
        let yaoqingBtn=false;
        let groupDetailBtn = false;
        let orderDetailBtn = false;
        switch (dataItem.state ) {
            case 10:
                orderStatus = '拼团中'
                showCancelBtn = true;
                yaoqingBtn = true;
                break;
            case 20:
                orderStatus = '拼团成功'
                groupDetailBtn = true;
                orderDetailBtn = true;
                break;
            case 30:
                orderStatus = '拼团失败 ';
                orderDetailBtn = true;
                break;
            case 40:
                orderStatus = '已取消'
                break;
            default:
                break;
        }

        return <div className='orderitem' style={{background:"#fff"}}>
            <WhiteSpace></WhiteSpace>
            <WingBlank>
                <Flex justify='between' style={{height: '0.8rem'}}>
                    <Flex style={{color: '#252525', fontSize: '0.24rem', lineHeight: '0.8rem'}} onClick={()=>{
                        dataItem.storeId!=0?this.props.dispatch(routerRedux.push({
                            pathname: `/storesShow/${dataItem.storeId}`
                        })):''
                    }}>
                        <Icon className="dianpu_logo" type={dianpusvg.id} ></Icon>
                        &nbsp;&nbsp;{dataItem.storeName}
                        {/* 更改图标的类型。。。。。。。。。。0：退货中。。。。 */}
                        {dataItem.storeId != 0 ? <Icon className="right" type={ rightsvg.id} style={{width:"5%"}}></Icon>:""}

                    </Flex>
                    {dataItem.orderState==10 ?
                        <div className="paystaus" style={{color: '#ff0036', fontSize: '0.24rem'}}>{orderStatus}</div>:
                        <div className="paystaus" style={{color: '#666', fontSize: '0.24rem'}}>{orderStatus}</div>}
                </Flex>
                {
                    0 ? <p style={{color: '#6BA820', position: 'relative', paddingLeft: '.8rem'}}><Icon style={{position: 'absolute', left: '.1rem', top: '-.06rem'}} type={ logisticsSvg.id }/>{ '此时的物流消息。。。' }</p> : ''
                }
                <WingBlank>
                    {dataItem.orderGoods.map((item,i)=>{
                        if(dataItem.orderGoods.length>1){
                            return <NoLazyImg src={item.goodsImage} style={{width:"1.5rem",height:"1.5rem",marginRight:".2rem",padding:".2rem"}}  key={i} onClick={()=>{
                                this.props.dispatch(routerRedux.push({
                                    pathname: `/orderDetail/${dataItem.orderId}`,
                                }));
                            }}/>
                        }else{
                            return <Flex  key={i} onClick={()=>{
                                this.props.dispatch(routerRedux.push({
                                    pathname: `/orderDetail/${dataItem.orderId}`,
                                }));
                            }}>
                                <div style={{width:"2rem",height:"2rem",marginRight:".2rem"}}>
                                    <NoLazyImg src={item.goodsImage} style={{width:"2rem",height:"2rem"}}/>
                                </div>

                                <div>
                                    <p style={{lineHeight:".4rem",marginBottom:".5rem"}}>{item.goodsName}</p>
                                    <p style={{color:"#999"}}>{item.specInfo}</p>
                                </div>
                            </Flex>
                        }
                    })}
                </WingBlank>

                <WhiteSpace></WhiteSpace>
                <Flex justify='end'>
                    <div style={{color: '#252525'}}>实付款: {`￥${dataItem.orderAmount }`}</div>
                </Flex>
                <WhiteSpace style={{borderBottom:"1px solid #999"}}></WhiteSpace>
                <Flex justify='end' style={{marginTop:".2rem"}}>


                    <div className="orderItemBtn">
                        {
                            showCancelBtn && <Button
                                onClick={(e) => this.cancelOrder(dataItem)}
                                style={{marginLeft: '0.1rem',borderRadius:".45rem"}}  size='small' inline >取消订单</Button>
                        }

                        {
                            yaoqingBtn && <Button
                                style={{marginLeft: '0.1rem',borderRadius:".45rem"}} type='ghost' size='small' inline >邀请好友</Button>
                        }
                        {
                            groupDetailBtn && <Button
                                onClick={()=>{ this.props.dispatch(routerRedux.push({
                                    pathname: `/groupDetail/${dataItem.groupId}`,
                                }));}}
                                style={{marginLeft: '0.1rem',borderRadius:".45rem"}}  size='small' inline >拼团详情</Button>
                        }
                        {
                            orderDetailBtn && <Button
                                onClick={()=>{ this.props.dispatch(routerRedux.push({
                                    pathname: `/orderDetail/${dataItem.orderId}`,
                                }));}}
                                style={{marginLeft: '0.1rem',borderRadius:".45rem"}} type='ghost' size='small' inline >订单详情</Button>
                        }
                    </div>
                </Flex>
                <WhiteSpace></WhiteSpace>
            </WingBlank>
            <WhiteSpace style={{backgroundColor: '#F7F7F7'}}></WhiteSpace>
        </div>
    }
}

export default GroupOrderItem;
